import React from 'react';
import { ActionButton } from '@/components/ui/ActionButton';
import { SpaceIcon } from '@/components/ui/SpaceIcon';
import { usePreferencesStore } from '@/stores/preferences';
import { useActiveSpaceStore } from '@/stores/activeSpace';
import { useSpace } from '@/hooks/api';
import type { SpaceCollection } from '@/types';

/**
 * Toolbar 组件的 props 类型定义
 */
interface ToolbarProps {
    // 集合总数
    collectionsCount: number;
    // 是否正在加载
    loading: boolean;
    // 搜索查询字符串
    searchQuery: string;
    // 过滤后的集合数量
    filteredCount: number;
    // 过滤后的集合列表（用于展开/折叠全部）
    filteredCollections: SpaceCollection[];
    // 是否正在保存
    isSaving: boolean;
    // 添加集合处理函数
    onAddCollection: () => void;
}

// 工具栏按钮配置类型
interface ToolbarButton {
    // 按钮文本
    label: string;
    // 是否有下拉箭头
    hasDropdown?: boolean;
    // 点击处理函数
    onClick?: () => void;
}

/**
 * 顶部工具栏组件
 * 职责：
 * - 显示当前空间信息
 * - 显示集合统计（总数和搜索结果数）
 * - 提供展开/折叠全部集合的操作
 * - 提供保存当前窗口为集合的操作
 */
const ToolbarComponent: React.FC<ToolbarProps> = ({
    collectionsCount,
    loading,
    searchQuery,
    filteredCount,
    filteredCollections,
    isSaving,
    onAddCollection,
}) => {
    // 从 PreferencesStore 获取批量设置展开状态的函数
    const setAllCollectionsExpanded = usePreferencesStore((state) => state.setAllCollectionsExpanded);

    // 获取当前活跃空间 ID
    const activeSpaceId = useActiveSpaceStore((state) => state.activeSpaceId);

    // 使用 TanStack Query 获取活跃空间详情
    const { data: activeSpace } = useSpace(activeSpaceId);

    // 展开全部集合
    const handleExpandAll = () => {
        if (!activeSpaceId) return;
        setAllCollectionsExpanded(
            activeSpaceId,
            filteredCollections.map((c) => c.collectionId),
            true
        );
    };

    // 折叠全部集合
    const handleCollapseAll = () => {
        if (!activeSpaceId) return;
        setAllCollectionsExpanded(
            activeSpaceId,
            filteredCollections.map((c) => c.collectionId),
            false
        );
    };

    const toolbarButtons: ToolbarButton[] = [
        { label: '展开全部', onClick: handleExpandAll },
        { label: '折叠全部', onClick: handleCollapseAll }
    ];

    return (
        // 添加 flex-shrink-0 防止在父容器(列布局)中被压缩，高度固定，集合区域单独滚动
        <header className="flex-shrink-0 flex items-center justify-between px-6 py-5 bg-white border-b border-gray-200">
            {/* 工具栏左侧：空间信息和统计 */}
            <div className="flex items-center gap-4">
                {/* 当前空间信息：图标 + 名称 */}
                <div className="flex items-center gap-2">
                    {activeSpace && (
                        <SpaceIcon
                            iconId={activeSpace.icon}
                            size={22}
                            color={activeSpace.icon_color}
                            className="flex-shrink-0 pb-1"
                        />
                    )}
                    <h1
                        className="text-xl font-semibold m-0 text-gray-800 pb-1"
                        style={{ color: activeSpace?.icon_color }}
                    >
                        {activeSpace?.name || 'Loading...'}
                    </h1>
                </div>

                {/* 集合数量统计 */}
                <span className="text-sm text-gray-500">
                    {loading ? '加载中...' : `${collectionsCount} 个集合`}
                    {searchQuery && !loading && (
                        <span className="ml-2">
                            · 找到 {filteredCount} 个结果
                        </span>
                    )}
                </span>
            </div>

            {/* 工具栏右侧：操作按钮组 */}
            <div className="flex items-center gap-2">
                {/* 常规工具栏按钮 */}
                {toolbarButtons.map((button, index) => (
                    <ActionButton
                        key={index}
                        hasDropdown={button.hasDropdown}
                        onClick={button.onClick}
                    >
                        {button.label}
                    </ActionButton>
                ))}

                {/* ADD COLLECTION 主要操作按钮 */}
                <ActionButton
                    primary
                    onClick={onAddCollection}
                    disabled={isSaving}
                >
                    {isSaving ? '保存中...' : '+ 保存当前窗口'}
                </ActionButton>
            </div>
        </header>
    );
};

// 使用 React.memo 优化 Toolbar 性能，避免不必要的重渲染
export const Toolbar = React.memo(ToolbarComponent);
